<template>
  <div class="cbp-plan-look">
    <PageTemplate>
      <div slot="content">
         <el-form
          :model="capaCity"
          label-position="right"
          label-width="150px"
          class="page-edit-colllapse-form"
          ref="capaCity">
          <el-row>
            <el-col :span="24">
              <el-form-item label="能力建设名称" prop="projectName">
                  <span>{{capaCity.projectName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="立项年度" prop="projectName">
               <span>{{capaCity.year}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="课题负责人" prop="projectName">
               <span>{{capaCity.leadingmanName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="能力建设总体目标" prop="projectName">
                <span>{{capaCity.projectTarget}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="年度计划及考核指标" prop="phases">
                  <el-table
                  class="table"
                  border
                  ref="multipleTable"
                  :data="phases"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :show-overflow-tooltip="true"
                  :header-cell-style="{background:tableHeaderBGC}"
                  >
                  <el-table-column type="index" :label="$t('cm.no')" align="center" width="60" fixed></el-table-column>
                  <el-table-column prop="phaseName" label="阶段" align="center"></el-table-column>
                  <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
                  <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
                  <el-table-column prop="jdMb" label="能力建设总体目标" align="center"></el-table-column>
                  <el-table-column prop="stageProgress" label="年度计划及考核指标" align="center"></el-table-column>
                  <el-table-column :label="$t('cm.operate')" prop="statussss" fixed="right" align="center" width="140">
                    <template slot-scope="scope">
                      <ListBtn :options="btns" :row-data="scope.row" @triggerListBtn="handleListBtn"></ListBtn>
                    </template>
                  </el-table-column>
                </el-table>

              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件" prop="fileName">
                <span>{{capaCity.fileName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="back">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_sri from '@/api/api_sri'
import ListBtn from '@/components/btn/ListBtn'
export default {
  components: {
    PageTemplate,
    ListBtn
  },
  data () {
    return {
      capaCity:{

      },
      phases:[],
      btns: [
      {
        value: 'look',
        label: 'cm.look'
      },
     ],
    }
  },
  watch: {

  },
   computed: {
        ...mapState({
          tableHeaderBGC: state => state.common.tableHeaderBGC
        }),

    },
  created () {
      this.getDetail();
  },
  methods: {

    //获取详情
      getDetail(){
      api_sri.sriGainCapacityBuildingPlanInfo({
         id:this.$router.history.current.params.id
       }, result => {
        if (result.code === Constant.RT_SUCCESS) {
            this.capaCity = result.data.capacityBuildingInfo
            this.phases = result.data.capacityPlanPhaseList
          //  this.flow_access.procInstId = result.data.id
          //已有附件
          if(this.capaCity.fileId){
            this.capaCity.fileList =[
                {
                  name:this.capaCity.fileName,
                  id:this.capaCity.fileId
                }
              ]
          }
        } else {
          ALERT.error(result.msg)
        }

      })

    },
    handleListBtn({btn,row}){
      if(btn==="look"){//查看
        COMMON.routerTo(Constant.ROUTE_SRI_GAIN_CBP_PROGRESS_LOOK.index, this.$router, { id: row.id })
      }
    },
    //返回
    back(){
      this.$router.go(-1);//返回上一层
    },


  },
}
</script>

<style lang="scss">
  .cbp-plan-look{
    .el-table__header,
    .el-table__body,
    .el-table__footer{
        width: 100% !important;
    }
    .el-form{
        background: #fff;
        padding-top: 30px;
      }
    .el-form-item__content>span:empty:before{
      content:"--"
    }
  }
</style>
